import { Directive, nextTick } from 'vue';

/**
 * Vue自定义指令，用于在元素内部有滚动内容时添加/移除特定的类名。
 */
const scrollbarDirective: Directive = {
  bind(el) {
    nextTick(() => {
      checkScrollbar(el);
    });
    el.judgeScrllBarHandler = function () {
      checkScrollbar(el);
    };
    window.addEventListener('resize', el.judgeScrllBarHandler);
  },
  unbind(el) {
    window.removeEventListener('resize', el.judgeScrllBarHandler);
    delete el.judgeScrllBarHandler;
  },
  /**
   * 在绑定的组件更新时调用。
   * 检查滚动条。
   * @param el - 绑定的组件元素
   */
  componentUpdated(el) {
    checkScrollbar(el);
  }
};

/**
 * 检查元素是否有滚动条，并根据结果向其添加/移除特定的类名。
 * @param el - 需要检查的元素
 */
function checkScrollbar(el: HTMLElement) {
  const operate = el.scrollHeight > el.clientHeight ? 'add' : 'remove';
  el.classList[operate]('has-scrollbar');
}

export default scrollbarDirective;
